<template>
  <div class="shop">
        <el-button size="mini" type="primary" @click="exportDeleteServiceData">导出数据</el-button>
        <el-button size="mini" type="primary" @click="searchDeleteData" style="float:right;">搜索</el-button>
        <el-input size="mini" placeholder="输入服务商手机号搜索" v-model='username' style="float:right;margin-left:12px;width:180px;"></el-input>
        <el-input size="mini" placeholder="输入联系人姓名" v-model='contacts' style="float:right;margin-left:12px;width:180px;"></el-input>
        <el-select style="width:140px; float:right;"
          size='mini'
          v-model="delete_type"
          filterable
          placeholder="移除类型">
        <el-option label="退费移除" value="1"></el-option>
        <el-option label="强制移除" value="0"></el-option>
        </el-select>

     <el-table :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="720"
      :cell-style="tc"
      :header-cell-style="tccolor">
      
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="服务商账号" prop="username"></el-table-column>
      <el-table-column label="联系人" prop="contacts"></el-table-column>
      <el-table-column label="邀请人账号" prop="invite_phone"></el-table-column>
      <el-table-column label="移除类型">
          <template slot-scope="scope">
              <p v-if="scope.row.delete_type == 1">退费移除</p>
              <p v-if="scope.row.delete_type == 0">强制移除</p>
          </template>
      </el-table-column>
      <el-table-column label="移除时间" prop="created_at"></el-table-column>
      <el-table-column label="操作" fixed='right'>
        <template slot-scope="scope">
            <el-button size="mini" @click="watchDeleteDetail(scope.row)">查看移除明细</el-button>
        </template>
      </el-table-column>
     </el-table>

    <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
    </div>
    <!--查看移除明细-->
    <jdialog :visible.sync="isWatchDelDetail" width='720px' title="被移除明细">
        <div class="detail">
           <div class="left">
             <span class="left_desc">服务商账号:</span><span class="right_desc">{{delDetailData.username}}</span>
             <br/>
             <span class="left_desc">&nbsp;&nbsp;&nbsp;移除时间:</span><span class="right_desc">{{delDetailData.created_at}}</span>
             <br/>
             <span class="left_desc">&nbsp;&nbsp;&nbsp;退费比例:</span><span class="right_desc">{{delDetailData.refund_rate}}</span>
             <br/>
           </div>
           <div class="right">
             <span class="left_desc">推荐人账号:</span><span class="right_desc">{{delDetailData.invite_phone}}</span>
             <br/>
             <span class="left_desc">&nbsp;&nbsp;&nbsp;移除类型:</span><span class="right_desc" v-if="delDetailData.delete_type == 1">退费移除</span><span class="right_desc" v-if="delDetailData.delete_type == 0">强制移除</span>
             <br/>
             <span class="left_desc">&nbsp;&nbsp;&nbsp;退费金额:</span><span class="right_desc">¥ {{delDetailData.refund_fee}}</span>
             <br/>
           </div>
        </div>

        <div style='text-align:center;margin:20px 0;'>
            <el-button size="mini" @click="isWatchDelDetail = false">取消</el-button>
            <el-button size="mini" type="primary" @click="isWatchDelDetail = false">确定</el-button>
        </div>
    </jdialog>
  </div>
</template>

<script>
import {serviceProviderDeleteList} from '@/api/service'
import { API_BASE_URL } from "@/config";
export default {
    data () {
        return {
           username:'',
           delete_type:'',
           export:0,
           contacts:'',
           page:1,
           size:20,
           tableData:[],
           total:0,
           isWatchDelDetail:false,
           delDetailData:{}
        }
    },
    created () {
     this.getserviceProviderDeleteListData()
    },
    methods: {
        //导出数据
        exportDeleteServiceData(){
          this.export = 1
          this.getserviceProviderDeleteListData()
        },
        //搜索数据
        searchDeleteData(){
          this.getserviceProviderDeleteListData()
        },
       //查看移除明细
       watchDeleteDetail(row){
        this.delDetailData = row
        this.isWatchDelDetail = true
       },
       //切换分页
       pageChange(page){
        this.page = page
        //重新获取数据
        this.getserviceProviderDeleteListData()
       },

       //获取移除服务商列表数据
       async getserviceProviderDeleteListData(){
         var form = {
           delete_type:this.delete_type,
           contacts:this.contacts,
           username:this.username,
           export:this.export,
           page:this.page,
           size:this.size
         }
         let res = await serviceProviderDeleteList(form)
         if(res.code === 10000){
                   if(this.export === 1) {
        this.export = 0
        window.open(
          `${API_BASE_URL}/admin/download/zip/${res.data[1].download_token}`
        );
        return;
        }else{
            this.tableData = res.data.data
            this.total = res.data.total
        }
           
         }else{
           this.$message.error(res.message)
         }
       },
       tc () {
      return "text-align:center; color:#333333; font-size:12px;";
        },
       tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
        },
    }
}
</script>

<style lang="scss" scoped>
.shop{
    padding: 20px;
    .pagination{
        float: right;
    }
    .detail{
        padding: 30px 20px 100px 20px;
        .right,.left{
            width: 50%;
            height: 100%;
            float: left;
        }
        
        span{
            margin-top: 16px;
        }
        .left_desc{
            color: #333;
            font-size: 14px;
            margin-left: 12px;
            line-height: 30px;
        }
        .right_desc{
            font-size: 14px;
            font-weight: 700;
            color: #333;
            margin-left: 12px;
            line-height: 30px;
            
        }
    }
}
</style>